<template>
  <div :class="['TeSeCpPanel',showOrHideCls]">
    <div class="view">
      <div class="productJSDiv">
        <div class="title">
          <img src="img/tese/t1.png">
        </div>
        <template v-if="chanpJSData.data!==null">
          <div class="jsDiv">
            <ul class="ulCls">
              <li v-for="(item,index) in chanpJSData.data" :key="index">
                <div class="div">
                  <img :src='item.imgUrl' :alt="item.imgAlt" :title="item.imgTitle">
                </div>
              </li>
            </ul>
          </div>
          <div class="oneDiv">
            <ul class="ulcai">
              <li v-for="(item,index) in oneData.data" :key="index">
                <div class="div fangda_div">
                  <img :src='item.imgUrl' class="fangda_E" :alt="item.imgAlt" :title="item.imgTitle">
                </div>
              </li>
            </ul>
          </div>
          <div class="twoDiv">
            <ul class="ulcai">
              <li v-for="(item,index) in twoData.data" :key="index" style="width: 20%;">
                <div class="div fangda_div">
                  <img :src='item.imgUrl' class="fangda_E" :alt="item.imgAlt" :title="item.imgTitle">
                </div>
              </li>
            </ul>
          </div>
          <div class="threeDiv">
            <div class="top">
              <div class="left">
                <template v-if="threeData.data.length>0">
                  <div class="div fangda_div">
                    <img :src='threeData.data[0].imgUrl' class="fangda_E">
                  </div>
                </template>
              </div>
              <div class="right">
                <ul class="ulcai">
                  <template v-for="(item,index) in threeData.data" :key="index" >
                    <li v-if="(index>0 && index<7)" style="width: 33.3%;">
                      <div class="div fangda_div">
                        <img :src='item.imgUrl' class="fangda_E" :alt="item.imgAlt" :title="item.imgTitle">
                      </div>
                    </li>
                  </template>
                </ul>
              </div>
            </div>
            <div class="zhongj">
              <ul class="ulcai">
                <template v-for="(item,index) in threeData.data" :key="index" >
                  <li v-if="(index>6)">
                    <div class="div fangda_div">
                      <img :src='item.imgUrl' class="fangda_E" :alt="item.imgAlt" :title="item.imgTitle">
                    </div>
                  </li>
                </template>
              </ul>
            </div>
          </div>


        </template>
      </div>
    </div>
  </div>
</template>


<style scoped>
.TeSeCpPanel{
  position: relative;background: #F6F8E3;
}

.view{
  font-size: 16px;margin: auto;padding-bottom: 100px;padding-top: 80px;width:100%;max-width: 1400px;
  /*max-width:1200px;*/
}
.view div{
  position: relative;
}
.productJSDiv{
  position: relative;width: 100%;
}
.productJSDiv .title{
  width: 362px;height: 91px;margin: auto;
}
.productJSDiv .title img{
  width: 362px;height: 91px;
}


.productJSDiv .jsDiv{
  padding-top: 70px;width: 80%;margin: auto;
}
.productJSDiv .ulCls{
  position: relative;
}
.productJSDiv .ulCls li{
  position: relative;padding-top: 20px;padding-bottom: 50px;
}
.productJSDiv .ulCls li .div{
  position: relative;
}
.productJSDiv .ulCls li .div img{
  width: 100%;
}

.productJSDiv .oneDiv{
  padding-top: 80px;width: 90%;margin: auto;
}
.productJSDiv .twoDiv{
  padding-top: 62px;width: 90%;margin: auto;
}

.productJSDiv .ulcai{
  position: relative;
  display:flex;display: -webkit-flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;
}
.productJSDiv .ulcai li{
  position: relative;width: 25%;/*padding: 10px;*/

}
.productJSDiv .ulcai li .div{
  position: relative;
}
.productJSDiv .ulcai li .div img{
  position: relative;width: 100%;
}
.productJSDiv .threeDiv{
  padding-top: 62px;width: 90%;margin: auto;
}
.productJSDiv .threeDiv .top{
  display:flex;display: -webkit-flex;flex-direction:row;
}
.productJSDiv .threeDiv .top .left{
  width: 40%;
}

.productJSDiv .threeDiv .top .left img{
  width: 100%;
}

.productJSDiv .threeDiv .top .right{
  width: 60%;
}
.productJSDiv .threeDiv .zhongj{

}
</style>

<script setup>
/*组件挂载完成后执行的函数；*/
import {ref,reactive,watch,computed,onBeforeUnmount, onMounted, onUnmounted} from "vue";
import { useStore} from 'vuex';
import Enum from "@/js/Enum";


let store = useStore();
//招牌产品介绍
let chanpJSData=reactive({data:null});
//第一组图片
let oneData=reactive({data:null});
//第二组图片
let twoData=reactive({data:null});
//第三组图片
let threeData=reactive({data:null});

onMounted(() => {
  console.log("TeSeCpPanel onMounted 特色产品一级页面 初始化");
  window.scrollTo(0, 0);
  store.state.channelId=Enum.cId_3;
  getSrsData();
});


onBeforeUnmount(() => {
  console.log('TeSeCpPanel onBeforeUnmount');
})
onUnmounted(() => {
  //卸载组件实例后调用,调用此钩子时,组件实例的所有指令都被解除绑定,所有事件侦听器都被移除,所有子组件实例被卸载。
  console.log("TeSeCpPanel onUnmounted 卸载组件实例后  ");
});
let showOrHideCls=ref('');
let getSrsData=()=>{
  if(store.state.teseCaiData===null){
    $.ajax({
      url: store.state.data_url+'api/getChannelListById',
      type: 'GET',
      dataType: 'json',
      jsonp: "",
      cache: false,
      data: {"channelId":Enum.cId_3},
      success: function(data) {
        console.log("GameData TeSeCpPanel 特色菜品",data);
        store.state.teseCaiData=(data.content.list[0].levelList.length>0?data.content.list[0].levelList:data.content.list[0].datalist);
        //console.log("GameData TeSeCpPanel 特色菜品");
        setDataHandler();
      },
      error: function(xhr, textStatus, errorThrown) {
        console.log("网络错误!");
      }
    });
  }else{
    setDataHandler();
  }
}
let setDataHandler=()=>{
  if(chanpJSData.data!=null)return;
  chanpJSData.data=store.state.teseCaiData[0].dataList;
  oneData.data=store.state.teseCaiData[1].dataList;
  twoData.data=store.state.teseCaiData[2].dataList;
  threeData.data=store.state.teseCaiData[3].dataList;
  console.log("GameData setDataHandler", chanpJSData.data.length);
}
</script>




